<%--
  Created by IntelliJ IDEA.
  User: HelloKitty
  Date: 2021/5/17
  Time: 16:07
  To change this template use File | Settings | File Templates.
--%>
<%-- 展示页面：2、导入taglib核心库，使用forEach --%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%-- 保存项目的绝对路径 --%>
<% pageContext.setAttribute("projectPath",request.getContextPath()); %>
<html>
<head>
    <%-- 用以说明主页制作所使用的文字以及语言 --%>
    <meta http-equiv="Content-Type" content="text/html" charset='UTF-8"'>
    <meta http-equiv="Content-Language" content="zh-CN">
    <title>员工列表</title>
    <%-- 导入jquery --%>
    <script src="webjars/jquery/1.12.3/dist/jquery.min.js" ></script>
</head>
<body>
<h1>员工列表</h1>

<%-- 展示页面：1、根据展示效果图，展示员工的信息 --%>
<%-- 展示页面：3、表格美化
【border】 = 表格边框粗细
【cellpadding】 = 表格内的文本内容 和 单元格边框的间隙
【cellspacing】 = 2个单元格之间的距离
--%>
<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <%-- 表头 --%>
        <th>ID</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>birth</th>
        <th>departmentName</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    <c:forEach items="${requestScope.emps}" var="emp">
        <tr>
            <%-- 表格元素 --%>
            <td>${emp.id}</td>
            <td>${emp.lastName}</td>
            <td>${emp.email}</td>
            <td>${emp.gender==0?"女":"男"}</td>
            <%-- 前端jsp页面：日期格式化 --%>
            <td><fmt:formatDate value="${emp.birth}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
            <td>${emp.department.departmentName}</td>
            <td>
                <a href="${projectPath}/emp/${emp.id}">编辑</a>
            </td>
            <td>
                <a href="${projectPath}/emp/${emp.id}" class="delBtn">删除</a>
            </td>
        </tr>
    </c:forEach>
</table>

<%-- 员工添加：1、来到，员工添加页面 --%>
<a href="${projectPath}/toAddPage">添加员工</a>
<form action="${projectPath}/quickAdd" method="post">
<%-- 数据绑定：快速添加：
    将员工所有的信息都写上
     empAdmin-admin@qq.com-1-101
     员工姓名-员工邮箱-性别-部门--%>
    <input type="text" name="quickAddEmployee" value="empAdmin-admin@qq.com-1-101"/>
    <input type="submit" value="快速添加员工" />
</form>

<form:form id="deleteForm" action="${projectPath}/emp/${emp.id}" method="post" >
    <input type="hidden" name="_method" value="DELETE" />
</form:form>

<script type="text/javascript">
    $(function() {
        $(".delBtn").click(function() {
            // 1、id选择表单，点击a标签的时候，this就是a标签，把a标签的href属性，设置给deleteForm表单
            $("#deleteForm").attr("action",this.href);
            this.href = "#";
            // 2、提交表单
            $("#deleteForm").submit();
            // 禁用a标签的默认行为
            return false;
        });
    });
</script>
</body>
</html>
